<template>
    <view class="content">
        <view class="input-cont">
            <input class="uni-input" placeholder="输入同步到view中" />
            <view class="input-search"></view>
        </view>
        <view class="List" v-for="(iten,index) in 10" :key="index">
            <image class="List-avatar" src="../../static/img/new.png" mode=""></image>
            <view class="List-desc">
                <view class="List-top">
                    <view class="List-top-name">王美丽</view>
                    <view class="">刚刚</view>
                </view>
                <view class="List-msg">Hi~</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style scoped>
    .content {
        height: 100vh;
        background: #F2F3F7;
        padding: 20rpx;
    }

    .input-cont {
        margin: 20rpx;
        padding: 20rpx 48rpx;
        background-color: #FFFFFF;
        border-radius: 50rpx;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >input {}
    }

    .uni-input {
        flex: 1;
    }

    .input-search {
        width: 32rpx;
        height: 32rpx;
        background: #666666;
    }

    .List {
        padding: 16rpx 32rpx;
        background-color: white;
        border-radius: 10rpx;
        margin-bottom: 10rpx;
        display: flex;
        align-items: center;
    }

    .List-avatar {
        width: 88rpx;
        height: 88rpx;
        border-radius: 16rpx;
    }

    .List-desc {
        flex: 1;
        margin-left: 20rpx;
    }

    .List-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: #333333;
        font-size: 28rpx;
    }

    .List-top-name {
        font-weight: 600;
        font-size: 32rpx;
        line-height: 32rpx;
    }

    .List-msg {
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
        margin-top: 20rpx;
    }
</style>